<template>
  <div class="employee-manage-container" ref="chartContainer">
  <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="page-header">
      <!-- <router-link class="back-link" to="/main/renshi/yuangongdangan"> -->
      <router-link class="back-link" to="/main/renshi">
        <i class="el-icon-arrow-left"></i>
        返回
      </router-link>
      <h1>员工档案管理</h1>
    </div>

    <div class="content-wrapper">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-user"></i>
          <span>员工档案管理</span>
        </div>
        <div class="section-desc">全方位的员工信息管理与维护</div>
      </div>

      <div class="function-grid">
        <router-link
          class="function-item"
          to="/main/renshi/dangan/employeeFileList"
        >
          <i class="el-icon-trophy"></i>
          <span>员工资料</span>
        </router-link>

        <router-link
          class="function-item"
          to="/main/renshi/kaoqing/jiangchen/jiangchengtb"
        >
          <i class="el-icon-warning"></i>
          <span>奖惩提报单 </span>
        </router-link>

        <router-link
          class="function-item"
          to="/main/renshi/kaoqing/jiangchen/zhaunxiangjlsqd"
        >
          <i class="el-icon-medal"></i>
          <span>专项奖励申请单</span>
        </router-link>

        <router-link
          class="function-item"
          to="/main/renshi/yuangongdangan/yuangongguanli/jiangchengbanfa"
        >
          <i class="el-icon-notebook-2"></i>
          <!-- <span>员工手册</span> -->
          <span>奖惩管理办法</span>
        </router-link>

        <router-link
          class="function-item"
          to="/main/renshi/danganguanli/yghetong/yghetongList"
        >
          <i class="el-icon-document"></i>
          <span>员工合同信息</span>
        </router-link>

        <router-link
          class="function-item"
          to="/main/renshi/yuangongdangan/yuangongguanli/yuzhongxx"
        >
          <i class="el-icon-chat-dot-square"></i>
          <span>员工语种能力信息</span>
        </router-link>

        <router-link
          class="function-item"
          to="/main/renshi/yuangongdangan/yuangongguanli/gongzuolvli"
        >
          <i class="el-icon-data-line"></i>
          <span>员工工作履历信息</span>
        </router-link>
        <!-- 
        <router-link class="function-item" to="/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli">
          <i class="el-icon-user"></i>
          <span>员工家庭成员信息</span>
        </router-link>

        <router-link class="function-item" to="/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli">
          <i class="el-icon-reading"></i>
          <span>员工教育背景信息</span>
        </router-link> -->

        <router-link
          class="function-item"
          to="/main/renshi/yuangongdangan/yuangongguanli/zhengshuxx"
        >
          <i class="el-icon-collection"></i>
          <span>员工证书信息</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<!-- <script>
export default {
  mounted() {
    this.checkScrollbar();
    window.addEventListener("resize", this.checkScrollbar);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.checkScrollbar);
  },
  methods: {
    checkScrollbar() {
      const div = this.$refs.chart;
      // const div2 = this.$refs.chartContainer;
      if (document.body.scrollHeight > window.innerHeight) {
        
        div.style.display = "none";
        //div2加一个样式justify-content: center;
        // div2.style.justifyContent = 'center';
      } else {
        div.style.display = "block";
        //div2加一个样式justify-content: center;
        // div2.style.justifyContent = '';
      }
    },
  },
};
</script> -->
<style lang="scss" scoped>
.employee-manage-container {
  min-height: 100vh;
  // background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    width: 800px;
    margin: 0px auto 20px auto;

    .back-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #409eff;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .content-wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
    width: 800px;
    margin: 0px auto 0px auto;

    .section-header {
      text-align: center;
      margin-bottom: 26px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409eff, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 18px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 14px;
      }
    }

    .function-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      // padding: 0 20px;
      width: 800px;

      .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background-color: #f5f7fa;
        color: #606266;
        padding: 24px;
        border-radius: 8px;
        transition: all 0.3s ease;
        border: 1px solid #ebeef5;
        height: 106px;
        text-align: center;

        i {
          font-size: 32px;
          margin-bottom: 12px;
          color: #409eff;
          transition: all 0.3s ease;
        }

        span {
          font-size: 14px;
          font-weight: 500;
        }

        &:hover {
          transform: translateY(-5px);
          background-color: #ecf5ff;
          border-color: #409eff;
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);

          i {
            transform: scale(1.2);
            color: #409eff;
          }

          span {
            color: #409eff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .employee-manage-container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content-wrapper {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 10px;

        .section-title {
          padding: 8px 16px;

          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .function-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0;

        .function-item {
          padding: 16px;
          height: 100px;

          i {
            font-size: 24px;
            margin-bottom: 8px;
          }

          span {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>